import React from "react";
import Swal from 'sweetalert2'
export default function TodoFooter({ checkAllTodo, todos, removeDoneTodo }) {
  return (
    <div className="todo-footer">
      <label>
        <input
          type="checkbox"
          checked={
            todos.every((item) => item.done === true) && todos.length > 0
          }
          onChange={(e) => {
            //更新状态
            checkAllTodo(e.target.checked);
          }}
        />
      </label>
      <span>
        <span>已完成 {todos.filter((item) => item.done).length}</span> / 全部{" "}
        {todos.length}
      </span>
      <button
        className="btn btn-danger"
        onClick={() => {
          //sweetalert 提醒
          Swal.fire({
            title: "确认删除",
            text: "您确定要批量删除已经完成的任务吗？",
            icon: "warning",
            showCancelButton: true,
            confirmButtonText: "确认",
            cancelButtonText: "取消",
          }).then((result) => {
            if (result.isConfirmed) {
              // 用户点击了确认按钮
              //清理已经完成的任务
              removeDoneTodo();
              // 执行删除操作或其他操作
              Swal.fire("已删除", "项目已成功删除。", "success");
            } else {
              // 用户点击了取消按钮或点击了遮罩层
              Swal.fire("已取消", "您取消了删除操作。", "info");
            }
          });
        }}
      >
        清除已完成任务
      </button>
    </div>
  );
}
